<template>
  <div class="flow" ref="main" style="width: 100%;height:100%; background-color: #FFFFFF;"></div>
</template>

<script>
  export default{
    props:{
      relatData:Array,
      showData:Array
    },
    data(){
      return{
        lebelList:[],
        linkList:[]
      }
    },
    watch:{
      depp:true,
      showData:function(newV,oldV){
        this.lebelList = newV
      },
      relatData:function(newV,oldV){
        this.linkList = newV
        this.initChart()
      }
    },
    methods:{
      initChart(){
        let myChart = this.$echarts.init(this.$refs.main);
          var colors = ["#5793f3", "#d14a61", "#675bba"];
          var option = {
            title: {
                text: ''
            },
            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            series: [

                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 45,
                    focusNodeAdjacency: true,
                    // 加箭头
                    edgeSymbol:['arrow'],
                    // 箭头大小
                    edgeSymbolSize:10,
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                        }
                    },
                    force: {
                        repulsion: 1000
                    },
                    edgeSymbolSize: [4, 50],
                    edgeLabel: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 10
                            },
                            formatter: "{c}"
                        }
                    },
                    data: this.lebelList,
                    links: this.linkList,
                    lineStyle: {
                        normal: {
                            opacity: 0.9,
                            width: 1,
                            curveness: 0
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
